<style lang="less" scoped>
.panel {
  margin-bottom: 10px;
  &-title {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 0.1px solid #eaeaea;
    background: white;
    font-size: 14px;

    &__value {
      flex: 1;
      align-items: center;
    }
  }
  &-content {
    margin-bottom: 10px;
    background: white;
    display: flex;
    padding-bottom: 10px;

    &__dec {
      flex: 1;
    }
    &__arrow {
      display: flex;
      align-items: center;
    }
    &__item {
      display: flex;
      padding: 10px 10px 0 10px;
      font-size: 14px;
      &-label {
        color: #666;
      }
      &-value {
        flex: 1;
        padding-left: 15px;
        color: #333;
      }
    }
  }
}
.lin {
  padding: 4px;
  background: #f8f8f8;
  font-size: 12px;
  &-source {
    padding-right: 10px;
    display: inline;
  }
  &-arrow {
    margin-right: 10px;
    position: relative;
    width: 50px;
    display: inline-block;
    vertical-align: top;
    &__txt {
      font-size: 10px;
      text-align: center;
      color: lightcoral;
    }
    &__icon {
      position: absolute;
      top: 12px;
      left: 0;
      width: 100%;
      height: 0.1px;
      background: lightcoral;
      &:after {
        display: block;
        content: ' ';
        position: absolute;
        right: -4px;
        top: -4px;
        height: 0;
        width: 0;
        border: 4px solid lightcoral;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
      }
    }
  }
  &-target {
    display: inline;
  }
}
</style>

<template>
  <div>
    <!-- init on loading -->
    <load v-if="loading" />
    <!-- 无数据 -->
    <div class="info" v-else-if="!items.Names||items.Names==0">无更多数据</div>
    <div v-else class="panel">
      <template v-for="(item, index) in items.Names" wx:key="unique">
        <!-- title -->
        <div class="panel-title" :key="'title'+index">
          <div class="panel-title__label">最终受益人：</div>
          <div class="panel-title__value c-primary">{{item.Name||'-'}}</div>
          <div class="panel-title__right c-primary">他关联4家公司</div>
        </div>
        <!-- content -->
        <div class="panel-content" :key="'content'+index">
          <div class="panel-content__dec">
            <div class="panel-content__item">
              <div class="panel-content__item-label">持股比例：</div>
              <div class="panel-content__item-value">{{item.PercentTotal||'-'}}</div>
              <div class="panel-content__item-right"></div>
            </div>
            <template v-for="(item1, index1) in item.Paths" wx:key="unique">
              <div class="panel-content__item" :key="'path'+index1">
                <div class="panel-content__item-label">股权链路径{{index1+1}}</div>
                <div class="panel-content__item-value"></div>
                <div class="panel-content__item-right"></div>
              </div>
              <div class="panel-content__item" :key="'node'+index1">
                <div class="panel-content__item-label"></div>
                <div class="panel-content__item-value">
                  <div class="lin">
                    <template v-for="(item2, index2) in item1.RouteNodeList" wx:key="unique">
                      <div class="lin-source" :key="'name'+index2">{{item2.Name||'-'}}</div>
                      <div class="lin-arrow" :key="'arrow'+index2">
                        <div class="lin-arrow__txt">{{item2.Percent||'-'}}</div>
                        <div class="lin-arrow__icon"></div>
                      </div>
                    </template>
                    <div class="lin-target">{{items.CompanyName||'-'}}</div>
                  </div>
                </div>
                <div class="panel-content__item-right"></div>
              </div>
            </template>

          </div>
          <!-- <div class="panel-content__arrow">
            <i class="iconfont icon-more"></i>
          </div> -->
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import Load from '@/components/load';
export default {
  components: {
    Load
  },
  data() {
    return {
      items: {}
    };
  },
  onLoad() {
    this.getInfos();
  },
  onUnload() {
    this.items = {};
  },
  computed: {
    loading() {
      return this.$store.getters.loading;
    }
  },
  methods: {
    async getInfos() {
      // 获取对外投资
      const url = '/app/getUltimateBeneficiary_VIP';
      let unique = '';
      try {
        unique = this.$root.$mp.page.options.Unique;
      } catch (error) {}
      const params = { unique };

      const { status, message, result } = await this.$http.get(url, params);
      if (status !== 200) {
        wx.showToast({
          title: message || '查询失败！',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      //更新数据
      this.items = result;
    }
  }
};
</script>
